<template>
  <div class="list" v-if="total > 0">
    <el-tooltip
        v-for="(item, index) in data" :key="index"
        effect="dark"
        :content="item.siteName"
        placement="left"
    >
      <div class="list-item fs-14">
        <div class="item-on" :style="'border-radius: ' + (props.round ? '100%' : '3px')">
          {{ index + 1 }}
        </div>
        <nuxt-link :to="'/site/' + item.id" class="item-title pointer">
          {{ item.siteName }}
        </nuxt-link>
      </div>
    </el-tooltip>
  </div>
  <Empty v-else />
</template>

<script setup lang="ts">
import {Site} from "~/entity/site";
import {Response} from "~/entity/response";

const props = defineProps({
  round: {
    type: Boolean,
    default: false
  },
  size: {
    type: Number,
    default: 10
  },
  random: {
    type: Boolean,
    default: false
  }
});
const site = ref<Site>({});
const data = ref<Site[]>([]);
const total = ref<number>(0);
const pageSize = ref(props.size);
const pageNum = ref(1);
const {siteApi} = useApi();
onBeforeMount(() => {
  if (props.random) {
    getRandomList();
  } else {
    getSiteList();
  }
});
const getSiteList = () => {
  siteApi.getList({
    pageSize: pageSize.value,
    pageNum: pageNum.value
  }, site.value).then((res: any) => {
    const {rows, total: sum}: Response = res;
    data.value = rows || [];
    total.value = sum || 0;
  });
}
const getRandomList = () => {
  siteApi.getRandom(props.size).then((res: any) => {
    const {data: list}: Response = res;
    data.value = list || [];
    total.value = list.length || 0;
  });
}
</script>


<style scoped lang="scss">
.list {
  .list-item {
    width: 100%;
    display: flex;
    align-items: center;
    line-height: 25px;

    .item-on {
      display: inline-block;
      min-width: 20px;
      height: 20px;
      line-height: 20px;
      color: #FFFFFF;
      background-color: var(--el-color-info);
      text-align: center;
      margin-right: 5px;
      font-size: 10px;
    }

    &:nth-child(1) .item-on {
      background-color: var(--el-color-error);
    }

    &:nth-child(2) .item-on {
      background-color: var(--el-color-warning);
    }

    &:nth-child(3) .item-on {
      background-color: var(--el-color-warning-dark-2);
    }

    .item-title {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>